<template>
  <div class="home">
    <div class="header">
      <div class="comnav"><topnav></topnav></div>
        <!-- <div class="header_top" >
          <div  class="header_top_left">
            <img :src="logo" alt="">
          </div>
          <div  class="header_top_con">
            
          </div>
          <div  class="header_top_right">
              <a href=""  >
              </a>
          </div>
          <div class="header_pc">
            <i class="el-icon-s-fold" @click="nav(flag=!flag)"></i>
              <transition name="fade" v-if="flag">
                <div class="nav">
                  <ul>
                    <li> <a href=""> 首页</a></li>
                    <li><a href="">关于我们</a></li>
                    <li><a href="">商城小程序</a></li>
                    <li><a href="">生鲜小程序</a></li>
                    <li><a href="">案例展示</a></li>
                    <li><a href="">服务项目</a></li>
                    <li><a href="">联系我们</a></li>
                  </ul>
                </div>
              </transition>
          </div>
        </div> -->
       <div class="header_top">
         <phonenav :backcolor='backcolor' :type="type"/>
       </div>
        <div class="header_con">
            <img :src="gz_07" alt="">
            <p>专注 小程序开发- 网站建设-APP-微信公众号开发</p>
        </div>
        <div class="header_about">
          <el-row>
              <el-button  type="danger" style="width:180px;font-size: 18px;" round>微信小程序开发</el-button>
              <el-button  type="primary" style="width:180px;font-size: 18px;" round>商城小程序</el-button>
              <el-button  type="success" style="width:180px;font-size: 18px;" round>了解我们</el-button>
          </el-row>
        </div>
    </div>
    <div class="about">
      <span>关于我们</span>
      <div class="about_">
         <div></div>
      </div>
      <p>专注于小程序开发、小程序定制、品牌网站建设、移动端网站设计、商城小程序开发、H5活动定制 服务为核心，<br>观智网络 </p>
      <ul>
        <li v-for="(vo,index) in about" :key="index">
          <a href="">
            <div class="about_img"><img :src="vo.img" alt=""></div>
            <div class="about_title">{{vo.title}}</div>
            <div class="about_con">{{vo.content}}</div>
          </a>
        </li>
      </ul>
      <div class="about_a">></div>
    </div>
   <div class="content">
      <div class="content-1">
        <div class="content-title">成功案例</div>
        <p class="content-introduce">
          我们在行业领域有9年，在我们每个人以往的工作经历当中服务过，很多500强企业，如新大州、宝钢气体、温碧泉、松下、老庙黄金等众多
          品牌官网建设，互联网平台有，麻椒、多盈理财、正蹊堂等
        </p>
        <div class="content_con">
            <ul class="content-content">
              <li  v-for="(item,index) in content" :key="index">
                <a href="">
                  <h2>
                    <img :src="item.img" />
                    <em>查看案例</em>
                    <sup></sup>
                  </h2>
                  <span>
                    <font>{{item.title}}</font>
                  </span>
                </a>
              </li>
            </ul>
            <div class="con_gengduo">
              <a class="gengduo">></a>
            </div>
        </div>
        
        
      </div>
    </div>

    <div class="index_sever">
      <div class="index_sever_con">
        <div class="index_sever_con_top">
          <span>有哪些服务</span> 
          <div></div>
        </div>
        <div class="index_sever_con_title">
          秉承以创意为核心<br>提升企业品牌商业价值是我们最根本的目的 
        </div>
        <div class="index_sever_con_zhong_con">
        <div class="index_sever_con_con">
          <div v-for="(vo,index) in sever" :key="index"  class="index_sever_con_con_one">
            <div><img :src="vo.img" alt=""></div>
            <span>{{vo.title}}</span>
            <div  v-for="(vos,index2) in vo.con" :key="index2" class="index_sever_con_con_one1" >
              <a href=""> {{vos.title}}</a>
            </div>
          </div>
        </div>
        </div>
      </div>
    </div>
    <a class="gengduo">></a>
    <div class="New-news">
    <div class="New-news-1">
      <div class="New-news-1-title">最新动态</div>
      <div class="New-news-1-title-Bottom"></div>
      <div class="New-news-1-content">
        <div class="New-news-1-left">
          <a href="">
            <div><img src="../assets/image/index/20200713112032_0210.png" /></div>
          </a>
          <span>定制小程序有什么好处?</span>
        </div>
        <div class="New-news-1-right">
          <ul v-for="(item,index) in Newnews" :key="index">
            <li>
              <a href="">{{ item.text }}</a>
            </li>
          </ul>
        </div>
      <div class="New-news-ul">
        <div class="New-news-ul-left">
          <div class="New-news-ul-left-background">
            <div class="New-news-ul-left-background-content">
              <img src="../assets/image/index/xiaoxiao.png" alt="" />
              <h3>小程序开发</h3>
              <span>熟悉微信小程序开发每一个API</span>
            </div>
          </div>
          <div class="New-news-ul-left-ul">
            <ul v-for="(item,index) in Newnewsleftul" :key="index">
              <li>
                <a href="">{{item.text}}</a>
              </li>
            </ul>
            <div class="New-news-ul-left-ul-bottom">
                <a href="">更多+</a>
            </div>
          </div>
        </div>
        <div class="New-news-ul-left">
          <div class="New-news-ul-middle-background">
            <div class="New-news-ul-left-background-content">
              <img src="../assets/image/index/xiaoxiao2.png" alt="" />
              <h3>网站建设</h3>
              <span>已服务众多500企业官网视觉设计和建站服务</span>
            </div>
          </div>
          <div class="New-news-ul-left-ul">
            <ul v-for="(item,index) in Newnewsmiddleul" :key="index">
              <li>
                <a href="">{{item.text}}</a>
              </li>
            </ul>
            <div class="New-news-ul-left-ul-bottom">
                <a href="">更多+</a>
            </div>
          </div>
        </div>
        <div class="New-news-ul-left">
          <div class="New-news-ul-right-background">
            <div class="New-news-ul-left-background-content">
              <img src="../assets/image/index/xiaoxiao3.png" alt="" />
              <h3>APP开发</h3>
              <span>熟悉微信小程序开发每一个API</span>
            </div>
          </div>
          <div class="New-news-ul-left-ul">
            <ul v-for="(item,index) in Newnewsrightul" :key="index">
              <li>
                <a href="">{{item.text}}</a>
              </li>
            </ul>
            <div class="New-news-ul-left-ul-bottom">
                <a href="">更多+</a>
            </div>
          </div>
        </div>                
      </div>
      </div>
    </div>
    <div class="New-New-Bottom"><a class="gengduo">></a></div>
  </div>

    <locations/>
    <last/>
  </div>
  
</template>

<script>
import locations from '@/components/Location.vue'
import last from '@/components/Last.vue'
import topnav from '@/components/Topnav.vue'
import phonenav from '@/components/Phone_nav.vue'
export default {
   components: {
    locations,
    last,
    topnav,
    phonenav
  },
  data() {
    return {
      flag: false,
      logo:require('../assets/image/logo.png'),
      gz_07:require('../assets/image/index/gz_07.png'),
      backcolor:'index/header.jpg',
      type:'image',
      nav:[
        {a:'/index',title:"首页"},{a:'/about',title:"关于我们"},{title:"商城小程序"},{title:"生鲜小程序"},{title:"案例展示"},{title:"服务项目"},{title:"联系我们"},
        ],
        about:[
          {img:require('../assets/image/index/gz_18.png'),title:'我们是谁',content:'我们是在互联网有9年经历的工作团队，成立于2010年，服务过上百家中小企业。'},
          {img:require('../assets/image/index/gz_21.png'),title:'解决了什么',content:'小程序开发、网站建设、微信网站开发、电商平台开发提供了定制化的服务。'},
          {img:require('../assets/image/index/gz_15.png'),title:'为客户带来的价值',content:'为客户提供互联网品牌形像的提升，同时在互联网上有更多的营销解决方案,例如带来更多的线索业务或销售订单'},
        ],
         content: [
        {
          img: require("../assets/image/index/1.png"),
          title: "懂伤帝社交小程序",
          look:"查看案例"
        },
        {
          img: require("../assets/image/index/2.png"),
          title: "MUMUSO小程序商城",
          look:"查看案例"
        },
        {
          img: require("../assets/image/index/3.png"),
          title: "静安区3.5学雷锋活动",
          look:"查看案例"
        },
        {
          img: require("../assets/image/index/4.png"),
          title: "易公里小程序",
          look:"查看案例"
        },
        {
          img: require("../assets/image/index/5.png"),
          title: "客邻名片小程序",
          look:"查看案例"
        },
        {
          img: require("../assets/image/index/6.png"),
          title: "研助宝小程序",
          look:"查看案例"
        },
        {
          img: require("../assets/image/index/7.png"),
          title: "华住会小程序",
          look:"查看案例"
        },
        {
          img: require("../assets/image/index/8.png"),
          title: "鲁泰集团",
          look:"查看案例"
        },
        {

          img: require("../assets/image/index/9.png"),
          title: "上海橱柜定制",
          look:"查看案例"
        },
        {
          img: require("../assets/image/index/10.png"),
          title: "群里说事小程序",
          look:"查看案例"
        },
      ],
      sever:[{img:require("../assets/image/index/gz_xcx.png"),title:'微信小程序开发',
      con:[{title:'分销商城'},{title:'小程序开发'},{title:'商城小程序'},{title:'工作应用'},{title:'社区等多种应用'},]},
      {img:require("../assets/image/index/gz_43.png"),title:'网站建设',
      con:[{title:'品牌网站建设'},{title:'中小企业网站建设'},{title:'网站改版'}]},
      {img:require("../assets/image/index/gz_45.png"),title:'电商平台开发',
      con:[{title:'商城网站开发'}]},
      {img:require("../assets/image/index/gz_40.png"),title:'营销网站建设',
      con:[{title:'推广营销页设计制作'}]},
      ],
      Newnews: [
        {
          text: "微信品牌小程序认证开通公测",
        },
        {
          text: "小程序商城分销模式实现利润暴增,三个月新增3...",
        },
        {
          text: "小程序商城系统是如何实现搭建的？",
        },
        {
          text: "水果生鲜小程序运营干货,手把手教你如何做线上...",
        },
        {
          text: "微信小程序,小商店能力并开放内测申请通道",
        },
        {
          text: "定制小程序有什么好处?",
        },
      ],
      Newnewsleftul: [
        {
          text: "分析定制小程序和模板开发的优缺点",
        },
        {
          text: "小程序定制开发流程",
        },
        {
          text: "小程序加微商城的运营方案",
        },
        {
          text: "酒类行业应该抓住微信小程序带来的移动端红...",
        },
        {
          text: "实体店如何开发自己的小程序",
        },
        {
          text: "小熊使蔬 小程序,一个月帮农户卖近30...",
        },
        {
          text: "外包小程序开发需要注意几个事项",
        },
        {
          text: "企业外包开发小程序要注意什么",
        },

        {
          text: "电商干趴了实体店，地摊干趴电商？",
        },
        {
          text: "小程序上线如何策划活动吸粉？",
        },
      ],
      Newnewsmiddleul: [
        {
          text: "网站要如何优化网站排名?",
        },
        {
          text: "上海网站建设公司哪家好？",
        },
        {
          text: "分享网站建设中要知道的10个SEO技巧",
        },
        {
          text: " 四个网站建设要点，让网站迅速打开...",
        },
        {
          text: "企业网站建设和运营中的四个要点",
        },
        {
          text: "网络营销--营销型网站建设",
        },
        {
          text: "网站建设和网络推广如何做最好",
        },
        {
          text: "网站建设的类型分为哪几种",
        },

        {
          text: "如果在上海找一家好的网络服务公司",
        },
        {
          text: "观智网络给大家盘点微信小程序常见问题",
        },
      ],
      Newnewsrightul: [
        {
          text: "App制作能为企业带来哪些价值？",
        },
        {
          text: "开发一个app需要多少钱_【APP开发成...",
        },
        {
          text: " 企业APP开发有哪些好处？",
        },
        {
          text: "转型企业进行APP开发应该怎么做",
        },
        {
          text: "创业初期，微信公众号和APP开发你选择哪...",
        },
        {
          text: "面对小程序的挑战，APP开发和运营应该怎...",
        },
        {
          text: "10个最佳的网站和App开发工具",
        },
        {
          text: "APP软件开发是什么？及APP开发的意义",
        },

        {
          text: "带你了解小程序，这是不是你需要的",
        },
        {
          text: "做个移动端网站好处在哪里？",
        },
      ],            
    };
  },
};
</script>
<style lang="less" scoped>
body{
  margin: 0 auto;
}
.comnav{
  padding: 30px 0 0;
}
.header{
  width: 100%;
  height: 705px;  
  background-size: 100% 100%;
  background: url('../assets/image/index/header.jpg') no-repeat center center;
}
.header_top{
  width: 100%;
  height: 140px;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  display: none;
}
.header_top_left img{
  width: 380px;
}
.header_top_right{
  width: 48%;
  display: flex;
}
.header_top_right a{
  width: 110px;
  color: white;
  text-decoration: none;
}
.header_pc{
  width: 200px;
  display: none;
  justify-content: flex-end;
}
.header_con{
  height: 200px;
  width: 100%;
  margin-top: 50px; 
  display: flex;
  align-items: center;
  flex-direction: column;
 
}
.header_con p{
  width: 100%;
 color: white;
 font-size: 24px;
 height: 80px;
 text-align: center;
 line-height: 80px;
}
.header_about{
  height: 100px;
   line-height: 100px;
   div{
     display: flex;
     justify-content: center;
   }
}
@media screen and (max-width: 1000px) {
  .header{
  width: 100%;
  height: 50px;  
  background-size: 100% 100%;
  background: url('../assets/image/index/header.jpg') no-repeat center center;
}
.header_top{
 display: block;
}
.comnav{
  padding: 30px 0 0;
  display: none;
}
.header_top_left{
  padding-left: 20px;
  display: flex;
}
.header_top_left img{
  width: 40%;
}
.header_top_right{
  width: 48%;
  display: flex;
}
.header_top_right{
  width: 48%;
  display: flex;
  display: none;
}
.header_top_right a{
  width: 110px;
  color: white;
  text-decoration: none;
  font-size: 14px;
}
.header_pc{
  width: 200px;
  display: block;
}
.nav{
  display: flex;
  left: 0;
  width: 150px;
  height: auto;
  position: fixed;
  top: 0;background-color:rgba(0,0,0,0.5);
}
.nav ul{
  margin: 0;
  width: 100%;
  height: 100%;
  flex-direction: row;
  display: flex;
  padding-left: 15px;
  align-items: flex-start;
  flex-direction: column;
}
.nav ul li{
  display: flex;
  // border: 1px solid red;
  width: 100%;
  flex-direction: row;
  justify-content: flex-start;
}
 .nav ul li a{
  display: block;
  color: white;
  font-size: 12px;
  text-decoration: none;
  height: 25px;
  list-style: none;
 }
 .header_con{
   display: none;
 }
.el-button{
  display: none;
}
}
@media screen and(max-width: 1000px){
   .content-content{
    padding: 0;
    display: flex;
    justify-content: center;
  }
.about{
  width: 70%;
  margin: 0 auto;
  height: auto;
}
.about span{
  padding-top: 60px;
  font-size: 26px;
  color: #666;
  display: block;
  text-align: center;
  position: relative;
  z-index: 1;
  font-style: normal;
  font-weight: 500;
}
.about p{
  width:100%;
  text-align: center;
  font-size: 13px;
  color: #666;
  margin-top: 30px;
  line-height: 25px;
}
.about_ {
  display: flex;
  justify-content: center;
}
.about_ div{
  text-align: center;
  margin-top: 10px;
  width: 55px;
  border-bottom: 3px solid #79B5FF;
}
.about ul{
  text-decoration: none;
  margin: 0px 0px 30px 0px;
  display: flex;
  flex-wrap:wrap ;
  margin: 0 auto;
    justify-content: space-between;
}
.about ul li{
  width: 230px;
  display: flex;
}
.about ul li a{
  width: 80%;
  margin-top: 15px;
  display: flex;
  justify-content: space-around;  
  flex-wrap: wrap;
  text-decoration: none;
}
.about_img{
    width: 130px;
    height: 130px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: #EDEEF1;
}
.about_img:hover{
    background: #DBDBDE;
}
.about_title{
  width: 100%;
  height: 80px;
  line-height: 80px;
  font-size: 18px;
  color: #666;
}
.about_con{
  width: 260px;
  font-size: 13px;
  height: 100px;
  color: #878686;
  line-height: 23px;
}
.about_a{
  width: 56px;
  height: 56px;
  display: block;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  color: #79B5FF;
  border: 5px solid rgba(208,226,249,0.5);
  line-height: 56px;
  font-family: '宋体';
  border-radius: 50%;
  margin: 0 auto 45px;
}
.about_a:hover{
  background-color: #79B5FF;
  border: 5px solid #79B5FF;
  border-radius: 50%;
  color: white; 
}
}
@media screen and(min-width: 1000px){
.about{
  width: 950px;
  margin: 0 auto;
  height: 780px;
}
.about span{
padding-top: 60px;
font-size: 36px;
color: #666;
display: block;
text-align: center;
position: relative;
z-index: 1;
font-style: normal;
font-weight: 500;
}
.about p{
  text-align: center;
  font-size: 16px;
  color: #666;
  margin-top: 30px;
  line-height: 25px;
}
.about_ {
  display: flex;
  justify-content: center;
}
.about_ div{
  text-align: center;
  margin-top: 10px;
  width: 55px;
  border-bottom: 3px solid #79B5FF;
}
.about ul{
  width: 1200px;
  display: flex;
  text-decoration: none;
  margin: 80px 0px 40px 0px;
}
.about ul li{
    display: flex;
}
.about ul li a{
  width: 290px;
  display: flex;
  justify-content: space-around;  
  flex-wrap: wrap;
  text-decoration: none;
}
.about_img{
    width: 158px;
    height: 158px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: #EDEEF1;
}
.about_img:hover{
    background: #DBDBDE;
}
.about_title{
  width: 100%;
  height: 80px;
  line-height: 80px;
  font-size: 22px;
  color: #666;
}
.about_con{
  width: 260px;
  font-size: 14px;
  height: 100px;
  color: #878686;
  line-height: 23px;
}
.about_a{
  width: 56px;
  height: 56px;
  display: block;
  margin-top: 40px;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  color: #79B5FF;
  border: 5px solid rgba(208,226,249,0.5);
  line-height: 56px;
  font-family: '宋体';
  border-radius: 50%;
  margin: 0 auto 45px;
}
.about_a:hover{
  background-color: #79B5FF;
  border: 5px solid #79B5FF;
  border-radius: 50%;
  color: white; 
}    
}

@media screen and(max-width: 1920px){
.content{
  width: 100%;
  height: auto;
  background: #F5F6F7;
}
.content-1{
  width: 70%;
  height: auto;
  margin: 0 auto;
  text-align: center; 
}
.content-title{
  padding-top: 30px;
  font-size: 26px;
  color: #666;
  display: block;
  text-align: center;
  position: relative;
  z-index: 1;
  font-style: normal;
  font-weight: 500;  
}
.content-introduce{
  text-align: center;
  font-size: 13px;
  color: #666;
  line-height: 25px;
  height: 80px;
}
.content-content{
  margin-top: 50px;
  list-style: none;
  outline: none;
  word-wrap: break-word;  
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

}
.content_con{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.con_gengduo{
  width: 100%;
  
}
.content-content li a:hover{
  transform:translateY(-2px);
  box-shadow: 0px 8px 15px 0px rgba(0, 0, 0, 0.4);
  width: 251px;
}
.content-content li{
  float: left;
  width: 251px;
}
.content-content li a{
  outline: none;
  margin: 0;
  padding: 0;
  list-style: none;
  outline: none;
  word-wrap: break-word;
  text-align: center;
  margin-top: 40px;
  background: #FFF;
  display: block;
}
.content-content li h2{
    display: block;
    width: 100%;
    height: 117px;
    overflow: hidden;
    text-align: center;
    position: relative;
    z-index: 1;
}
.content-content li h2 img{
  max-width: 100%;
  border: 0px;
  vertical-align: top;
  margin: 0;
  padding: 0;
  list-style: none;
  outline: none;
  word-wrap: break-word;
}
.content-content li h2 em{
  display: block;
  position: absolute;
  left: 0px;
  width: 251px;
  height: 30px;
  line-height: 30px;
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;
  font-size: 16px;
  text-align: center;
  top: 50%;
  margin-top: -15px;
  color: #FFF;
  z-index: 101;
  font-style: normal;
  font-weight: normal;  
}
.content-content li:hover h2 em{
  filter: alpha(opacity=1);
  -moz-opacity: 1;
  -khtml-opacity: 1;
  opacity: 1;
}
.content-content li h2 sup:hover{
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5; 
}
.content-content li:hover h2 sup{
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
.content-content li h2 sup{
  display: block;
  font-style: normal;
  width: 251px;
  height: 165px;
  background: #000;
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;
  position: absolute;
  z-index: 100;
  left: 0px;
  top: 0px;
}
.content-content li span{
  height: 30px;
  line-height: 30px;
  background: url(../assets/image/index/gzjt.jpg) no-repeat 450px center;
  display: block;
  text-align: left;
  color: #666;
  font-size: 18px;
  list-style: none;
  outline: none;
  word-wrap: break-word;
}
.content-content li span font{
  margin-left: 20px;
  display: inline-block;
  list-style: none;
  outline: none;
  word-wrap: break-word;  
  line-height: 30px;
  text-align: left;
  color: #666;
  font-size: 15px;  
}

.gengduo{
  width: 56px;
  height: 56px;
  display: inline-block;
  margin-top: 40px;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  color: #79B5FF;
  border: 5px solid rgba(208,226,249,0.5);
  line-height: 56px;
  font-family: '宋体';
  border-radius: 50%;
  margin-bottom: 45px;
}
.gengduo:hover{
  background-color: #79B5FF;
  border: 5px solid #79B5FF;
  border-radius: 50%;
  color: white; 
}  
}
@media screen and(min-width: 1000px){
.content{
  width: 100%;
  height: auto;
  background: #F5F6F7;
}
.content-1{
  width: 1200px;
  height: auto;
  margin: 0 auto;
  text-align: center; 
}
.content-title{
  font-size: 36px;
  color: #666;
  display: block;
  text-align: center;
  position: relative;
  z-index: 1;
  font-style: normal;
  font-weight: 500;  
}
.content-introduce{
  text-align: center;
  font-size: 16px;
  color: #666;
  margin-top: 40px;
  line-height: 25px;
  height: 80px;
}
.content-content{
  width: 100%;
  margin-top: 50px;
  list-style: none;
  outline: none;
  word-wrap: break-word;  
}
.content-content li a:hover{
  transform:translateY(-2px);
  box-shadow: 0px 8px 15px 0px rgba(0, 0, 0, 0.4);
  width: 508px;
}
.content-content li{
  float: left;
  margin:21px;
  width: 508px;
}
.content-content li a{
  outline: none;
  margin: 0;
  padding: 0;
  list-style: none;
  outline: none;
  word-wrap: break-word;
  text-align: center;
  margin-top: 40px;
  background: #FFF;
  display: block;
}
.content-content li h2{
    display: block;
    width: 100%;
    height: 277px;
    overflow: hidden;
    text-align: center;
    position: relative;
    z-index: 1;
}
.content-content li h2 img{
  max-width: 100%;
  border: 0px;
  vertical-align: top;
  margin: 0;
  padding: 0;
  list-style: none;
  outline: none;
  word-wrap: break-word;
}
.content-content li h2 em{
  display: block;
  position: absolute;
  left: 0px;
  width: 508px;
  height: 30px;
  line-height: 30px;
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;
  font-size: 16px;
  text-align: center;
  top: 50%;
  margin-top: -15px;
  color: #FFF;
  z-index: 101;
  font-style: normal;
  font-weight: normal;  
}
.content-content li:hover h2 em{
  filter: alpha(opacity=1);
  -moz-opacity: 1;
  -khtml-opacity: 1;
  opacity: 1;
}
.content-content li h2 sup:hover{
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5; 
}
.content-content li:hover h2 sup{
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
.content-content li h2 sup{
  display: block;
  font-style: normal;
  width: 508px;
  height: 265px;
  background: #000;
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;
  position: absolute;
  z-index: 100;
  left: 0px;
  top: 0px;
}
.content-content li span{
  height: 70px;
  line-height: 70px;
  background: url(../assets/image/index/gzjt.jpg) no-repeat 450px center;
  display: block;
  text-align: left;
  color: #666;
  font-size: 18px;
  list-style: none;
  outline: none;
  word-wrap: break-word;
}
.content-content li span font{
  margin-left: 20px;
  display: inline-block;
  list-style: none;
  outline: none;
  word-wrap: break-word;  
  line-height: 70px;
  text-align: left;
  color: #666;
  font-size: 18px;  
}
.gengduo{
  width: 56px;
  height: 56px;
  display: inline-block;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  color: #79B5FF;
  border: 5px solid rgba(208,226,249,0.5);
  line-height: 56px;
  font-family: '宋体';
  border-radius: 50%;
  margin-bottom: 45px;
  -moz-transition: all .2s linear;
  -o-transition: all .2s linear;
  -webkit-transition: all .2s linear;
  transition: all .2s linear;  
}
.gengduo:hover{
  background-color: #79B5FF;
  border: 5px solid #79B5FF;
  border-radius: 50%;
  color: white; 
}  
}

.index_sever{
  width: 100%;
  height: 648px;
  background: url('../assets/image/index/gzbg_cen.jpg') no-repeat center center;
  background-size: auto;
  position: relative;
  z-index: 1;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.index_sever_con_zhong_con{
  width: 100%;
  display: flex;
  justify-content: center;
}
.index_sever_con{
  width: 80%;
}
.index_sever_con_top{
  
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.index_sever_con_top span{
  padding-top: 40px;
  font-size: 36px;
  color: #fff;
  display: block;
  text-align: center;
  position: relative;
  z-index: 1;
  font-style: normal;
  font-weight: 500;
  width: 100%;
  
}
.index_sever_con_top div{
  text-align: center;
  margin-top: 10px;
  width: 55px;
  border-bottom: 3px solid #79B5FF;
}
.index_sever_con_title{
  text-align: center;
  font-size: 16px;
  color: #FFF;
  margin-top: 30px;
  line-height: 25px;
}
.index_sever_con_con{
  width: 80%;
  display: flex;
  justify-content: center;

}
.index_sever_con_con_one
{
  width: 30%;
  text-align: left;
}
.index_sever_con_con_one img{
  margin-top: 50px;
   margin-bottom: 20px;
}
.index_sever_con_con_one span{
  color: white;
  font-weight: 500;
  font-size: 18px;
  display: block;
  height: 50px;
  width: 200px;
  text-align: left;
  margin-top: 50px;
}
.index_sever_con_con_one1 a{
  display: block;
  width: 150px;
  height: 30px;
  text-align: left;
  color: #adddff;
  text-decoration: none;
  font-size: 14px;
}
@media screen and (max-width: 1000px) {
 .index_sever{
  width: 100%;
  height: auto;
  background: url('../assets/image/index/gzbg_cen.jpg') no-repeat center center;
  background-size: auto;
  position: relative;
  z-index: 1;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.index_sever_con{
  width: 80%;
}
.index_sever_con_top{
  
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.index_sever_con_top span{
  padding-top: 40px;
  font-size: 16px;
  color: #fff;
  display: block;
  text-align: center;
  position: relative;
  z-index: 1;
  font-style: normal;
  font-weight: 500;
  width: 100%;
  
}
.index_sever_con_top div{
  text-align: center;
  margin-top: 10px;
  width: 8%;
  border-bottom: 3px solid #79B5FF;
}
.index_sever_con_title{
  text-align: center;
  font-size: 12px;
  color: #FFF;
  margin-top: 20px;
  line-height: 25px;
}
.index_sever_con_con{
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap:wrap ;

}
.index_sever_con_con_one
{
  width: 45%;
  height: auto;
  text-align: center;
  border-bottom: 1px solid #79B5FF;
  margin-right: 3px;
  margin-bottom: 3px;
}
.index_sever_con_con_one img{
  margin-top: 50px;
  margin-bottom: 10px;
}
.index_sever_con_con_one span{
  color: white;
  font-weight: 500;
  font-size: 14px;
  display: block;
  height: 40px;
  width: 100%;
  text-align: center;
  margin-top: 20px;
}
.index_sever_con_con_one1 a{
  display: block;
  width: 100%;
  height: 30px;
  text-align: center;
  color: #adddff;
  text-decoration: none;
  font-size: 12px;

}
}
@media screen and(max-width: 1920px){
.New-news {
  width: 100%;
  height: auto;
  background: #f2f2f2;
}
.New-news-1{
  width: 80%;
  height: auto;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.New-news-1-title {
  height: 20px;
  font-size: 26px;
  padding: 20px;
  color: #666;
  display: block;
  text-align: center;
  position: relative;
  z-index: 1;
  font-style: normal;
  font-weight: 500;
}
.New-news-1-title-Bottom {
  display: block;
  width: 40px;
  margin: 0 auto;
  border-bottom: 3px solid #79b5ff;
}
.New-news-1-content {
  width: 100%;
  height: auto;
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
}
.New-news-1-left {
  width: 290px;
  height: auto;
  margin: 0 auto;
  padding-bottom: 30px;
}
.New-news-1-left h3 {
  height: 190px;
  text-align: center;
  width: 100%;
  overflow: hidden;
}
.New-news-1-left div img {
  max-width: 100%;
}
.New-news-1-left span {
  background: #fff;
  height: 65px;
  line-height: 65px;
  display: block;
  text-align: center;
  color: #000;
  font-size: 18px;
}
.New-news-1-right {
  width: 280px;
  height: auto;
  margin-left: 32px;
}
.New-news-1-right ul {
  margin-top: -20px;
  outline: none;
  word-wrap: break-word;
  font-size: 16px;
  color: #666666;
}
.New-news-1-right ul:hover {
  margin-top: -20px;
  outline: none;
  word-wrap: break-word;
  font-size: 16px;
  color: #277fd9;
}
.New-news-1-right ul li {
  outline: none;
  word-wrap: break-word;
}
.New-news-1-right ul li a {
  display: block;
  height: 53px;
  width: 210px;
  overflow: hidden;
  line-height: 53px;
  color: #666;
  font-size: 11px;
  position: relative;
  z-index: 1;
  border-bottom: 1px solid #d9d9d9;
  text-decoration: none;
  text-align: left;
}
.New-news-1-right ul li a:hover {
  color: #277fd9;
}
.New-news-ui {
  background: #f2f2f2;
  padding-top: 20px;
  width: 100%;
  overflow: hidden;
  padding-bottom: 40px;
  display: flex;
}
.New-news-ul-left {
  width: 261px;
  height: 650px;
  text-align: center;
  float: left;
  margin: 22px;
  overflow: hidden;
}
.New-news-ul-left-background {
  width: 261px;
  height: 200px;
  background: -webkit-linear-gradient(left, #287bdb, #115fb9);
}
.New-news-ul-middle-background {
  width: 261px;
  height: 200px;
  background: -webkit-linear-gradient(left, #52a614, #3d9c16);
}
.New-news-ul-right-background {
  width: 261px;
  height: 200px;
  background: -webkit-linear-gradient(left, #ef9914, #dd680b);
}
.New-news-ul-left-background-content {
  padding-top: 30px;
  padding-bottom: 30px;
  width: 100%;
  position: relative;
  z-index: 1;
  overflow-y: auto;
}
.New-news-ul-left-background-content img {
  border: 0px;
  vertical-align: top;
}
.New-news-ul-left-background-content h3 {
  color: #fff;
  font-weight: normal;
  font-size: 14px;
  line-height: 30px;
}
.New-news-ul-left-background-content span {
  color: #fff;
  font-size: 12px;
}
.New-news-ul-left-ul {
  background: #fff;
  width: 100%;
  padding-top: 10px;
}
.New-news-ul-left-ul ul {
  outline: none;
  word-wrap: break-word;
  color: #9e9e9e;
}
.New-news-ul-left-ul ul:hover {
  outline: none;
  word-wrap: break-word;
  color: #277fd9;
}

.New-news-ul-left-ul ul li {
  font-size: 16px;
  text-align: left;
  width: 330px;
  text-overflow: ellipsis;
  white-space: nowrap; 
}
.New-news-ul-left-ul ul li a{
  width: 100%;
  overflow: hidden;
  font-size: 10px;
  text-decoration: none;
  text-align: left;
  color: #666666;
}
.New-news-ul-left-ul ul li :hover{
  color: #3588dc;
}
.New-news-ul-left-ul ul li a p {
  margin: 0px;
  padding: 0px;
  display: block;
  float: left;
  color: #666666;
}
.New-news-ul-left-ul-bottom{
    padding-bottom: 30px;
    text-align: center;
    font-size: 14px;    
    margin-top: 50px;
}
.New-news-ul-left-ul-bottom a{
    color: #277fd9;    
}
.gengduo{
  width: 56px;
  height: 56px;
  display: block;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  color: #79B5FF;
  border: 5px solid rgba(208,226,249,0.5);
  line-height: 56px;
  font-family: '宋体';
  border-radius: 50%;
  margin: 0 auto 45px;
  -moz-transition: all .2s linear;
  -o-transition: all .2s linear;
  -webkit-transition: all .2s linear;
  transition: all .2s linear;  
}
.gengduo:hover{
  background-color: #79B5FF;
  border: 5px solid #79B5FF;
  border-radius: 50%;
  color: white; 
}  
.New-New-Bottom{
  width: 100%;
  margin: 0 auto;
}
}
@media screen and(min-width: 1000px){
.New-news {
  width: 100%;
  background: #f2f2f2;
  height: auto;
}
.New-news-1 {
  width: 1100px;
  margin: 0 auto;
  padding-bottom: 50px;
  position: relative;
  z-index: 1;
  height: 1300px;
}
.New-news-1-title {
  height: 40px;
  font-size: 36px;
  color: #666;
  display: block;
  text-align: center;
  position: relative;
  z-index: 1;
  font-style: normal;
  font-weight: 500;
}
.New-news-1-title-Bottom {
  display: block;
  width: 60px;
  margin: 0 auto;
  border-bottom: 3px solid #79b5ff;
}
.New-news-1-content {
  width: 1100px;
  height: 510px;
  border-bottom: 1px solid #e6e6e6;
  margin-top: 30px;
}
.New-news-1-left {
  float: left;
  width: 490px;
}
.New-news-1-left h3 {
  height: 290px;
  text-align: center;
  width: 100%;
  overflow: hidden;
}
.New-news-1-left h3 img {
  max-width: 100%;
}
.New-news-1-left span {
  background: #fff;
  height: 65px;
  line-height: 65px;
  display: block;
  text-align: center;
  color: #000;
  font-size: 20px;
}
.New-news-1-right {
  float: right;
  width: 500px;
  margin-right: 30px;
}
.New-news-1-right ul {
  margin-top: -20px;
  outline: none;
  word-wrap: break-word;
  font-size: 24px;
  color: #666666;
}
.New-news-1-right ul:hover {
  margin-top: -20px;
  outline: none;
  word-wrap: break-word;
  font-size: 24px;
  color: #277fd9;
}
.New-news-1-right ul li {
  margin: 0;
  padding: 0;
  outline: none;
  word-wrap: break-word;
}
.New-news-1-right ul li a {
  display: block;
  height: 75px;
  width: 100%;
  overflow: hidden;
  line-height: 75px;
  color: #666;
  font-size: 18px;
  position: relative;
  z-index: 1;
  padding-left: 15px;
  border-bottom: 1px solid #d9d9d9;
  text-decoration: none;
  text-align: left;
}
.New-news-1-right ul li a:hover {
  color: #277fd9;
}
.New-news-ui {
  background: #f2f2f2;
  padding-top: 20px;
  width: 100%;
  overflow: hidden;
  padding-bottom: 40px;
}
.New-news-ul-left {
  width: 320px;
  float: left;
  text-align: center;
  overflow: hidden;
  margin-top: 80px;
}
.New-news-ul-left-background {
  width: 320px;
  height: 200px;
  background: -webkit-linear-gradient(left, #287bdb, #115fb9);
}
.New-news-ul-middle-background {
  width: 320px;
  height: 200px;
  background: -webkit-linear-gradient(left, #52a614, #3d9c16);
}
.New-news-ul-right-background {
  width: 320px;
  height: 200px;
  background: -webkit-linear-gradient(left, #ef9914, #dd680b);
}
.New-news-ul-left-background-content {
  padding-top: 30px;
  padding-bottom: 30px;
  width: 100%;
  position: relative;
  z-index: 1;
  overflow-y: auto;
}
.New-news-ul-left-background-content img {
  border: 0px;
  vertical-align: top;
}
.New-news-ul-left-background-content h3 {
  color: #fff;
  font-weight: normal;
  font-size: 18px;
  line-height: 30px;
}
.New-news-ul-left-background-content span {
  color: #fff;
  font-size: 14px;
}
.New-news-ul-left-ul {
  background: #fff;
  width: 100%;
  padding-top: 10px;
}
.New-news-ul-left-ul ul {
  outline: none;
  word-wrap: break-word;
  color: #9e9e9e;
}
.New-news-ul-left-ul ul:hover {
  outline: none;
  word-wrap: break-word;
  color: #277fd9;
}

.New-news-ul-left-ul ul li {
  font-size: 24px;
  text-align: left;
  width: 330px;
  text-overflow: ellipsis;
  white-space: nowrap; 
}
.New-news-ul-left-ul ul li a{
  width: 100%;
  overflow: hidden;
  font-size: 14px;
  text-decoration: none;
  text-align: left;
  color: #666666;
}
.New-news-ul-left-ul ul li :hover{
  color: #3588dc;
}
.New-news-ul-left-ul ul li a p {
  margin: 0px;
  padding: 0px;
  display: block;
  float: left;
  color: #666666;
}
.New-news-ul-left-ul-bottom{
    padding-bottom: 30px;
    text-align: center;
    font-size: 16px;    
    margin-top: 50px;
}
.New-news-ul-left-ul-bottom a{
    color: #277fd9;    
}
.gengduo{
width: 56px;
height: 56px;
display: inline-block;
text-align: center;
font-size: 24px;
font-weight: bold;
color: #79B5FF;
border: 5px solid rgba(208, 226, 249, 0.5);
line-height: 56px;
font-family: '宋体';
border-radius: 50%;
margin-bottom: 45px;
}
.gengduo:hover{
  background-color: #79B5FF;
  border: 5px solid #79B5FF;
  border-radius: 50%;
  color: white; 
}  
.New-New-Bottom{
  width: 100%;
  margin: 0 auto;
}
}
</style>
